<template>
    <require from="./em-blog-comment.css"></require>
    <div class="em-blog-comment">
        <div class="ui minimal comments" ref="blogCommentsRef">
            <h3 title="快速评论 (r)" class="ui dividing header"><i class="blue comments outline icon"></i> ${comments.length
                > 0 ? comments.length + ' ' : ''}评论</h3>
            <div repeat.for="item of comments" class="comment tms-blog-comment" data-id="${item.id}">
                <em-user-avatar user.bind="item.creator"></em-user-avatar>
                <div class="content">
                    <a class="author" data-value=${item.creator.username}>${item.creator.name}</a>
                    <div class="metadata">
                        <span if.bind="item.createDate == item.updateDate" title="创建于${item.createDate | date}"><span
                                class="date" data-timeago="${item.createDate}">${item.createDate |
                                timeago}</span></span>
                        <span if.bind="item.createDate != item.updateDate"
                            title="创建于${item.createDate | date}，更新于${item.updateDate | date}"><span class="date"
                                data-timeago="${item.updateDate}">${item.updateDate |
                                timeago}</span><span>(更新)</span></span>
                        <div class="rating">
                            <i click.delegate="rateHandler(item)" style="cursor: pointer;" title="赞一下"
                                class="cbutton cbutton--effect-novak thumbs ${item.voteZan && item.voteZan.split(',').includes(loginUser.username) ? '' : 'outline'} up icon"></i>
                            <span title="${item.voteZan}">${item.voteZanCnt ? item.voteZanCnt : ''} 赞</span>
                        </div>
                    </div>
                    <div show.bind="item.editor == 'Mind'" data-id="${item.id}" data-case="comment">
                        <em-blog-mind comment.bind="item"></em-blog-mind>
                    </div>
                    <div show.bind="item.editor == 'Excel'" data-id="${item.id}" data-case="comment">
                        <em-blog-excel comment.bind="item"></em-blog-excel>
                    </div>
                    <div show.bind="item.editor == 'Sheet'" data-id="${item.id}" data-case="comment">
                        <em-blog-sheet comment.bind="item"></em-blog-sheet>
                    </div>
                    <div show.bind="item.editor != 'Mind' && item.editor != 'Excel' && item.editor != 'Sheet' && !item.isEditing"
                        data-id="${item.id}" data-case="comment" fancybox ref="mkbodyRef"
                        class="text markdown-body fr-view"
                        innerhtml.bind="item.content | parseMd:blog.space.channel:item.editor | emoji:mkbodyRef"></div>
                    <div class="textcomplete-container" show.bind="item.isEditing">
                        <div class="append-to"></div>
                    </div>
                    <textarea ref="editTxtRef" data-id="${item.id}"
                        textcomplete.bind="{users: users, channel: blog.space.channel}" pastable.bind="item.uuid"
                        autosize dropzone="at-id.bind: item.uuid"
                        keydown.trigger="eidtKeydownHandler($event, item, editTxtRef)" show.bind="item.isEditing"
                        value.bind="item.content & oneWay" class="tms-blog-comment-edit-textarea" rows="1"></textarea>
                    <div show.bind="item.isEditing" class="ui compact icon buttons tms-blog-comment-edit-actions">
                        <button click.delegate="editOkHandler($event, item, editTxtRef)" title="保存 (ctrl+enter)"
                            class="ui left attached compact icon button">
                            <i class="checkmark icon"></i>
                        </button>
                        <button click.delegate="editCancelHandler($event, item, editTxtRef)" title="取消 (esc)"
                            class="ui attached compact icon button">
                            <i class="remove icon"></i>
                        </button>
                        <button dropzone="type:Blog; clickable.bind: !0; target.bind: editTxtRef; at-id.bind: item.uuid"
                            title="上传 (ctrl+u)" class="ui right attached compact icon button">
                            <i class="upload icon"></i>
                        </button>
                    </div>
                    <div class="actions">
                        <a if.bind="item.creator.username != loginUser.username" click.delegate="replyHandler(item)"
                            class="reply" title="回复消息"><i class="large reply icon link"></i></a>
                        <a if.bind="isSuper || item.creator.username == loginUser.username"
                            click.delegate="editHandler(item, editTxtRef)" title="评论编辑(ctrl+shift+dblclick)"
                            class="reply"><i class="large link edit icon"></i></a>
                        <a class="item tms-clipboard" data-clipboard-text="${item.content}" title="复制评论内容"><i
                                class="large link icon copy"></i></a>
                        <em-blog-comment-share blog.bind="blog" comment.bind="item" login-user.bind="loginUser">
                        </em-blog-comment-share>
                        <div if.bind="isSuper || item.creator.username == loginUser.username" ui-dropdown-action
                            style="margin-right: .75em;" class="ui icon top right pointing dropdown" title="移除评论">
                            <i class="red large trash outline icon"></i>
                            <div class="menu">
                                <div style="color: red;" class="item" click.delegate="removeHandler(item)"><i
                                        class="trash outline icon"></i>确认移除</div>
                            </div>
                        </div>
                        <div ui-dropdown-action style="margin-right: .75em;" class="ui icon top right pointing dropdown"
                            title="更多操作">
                            <i class="large ellipsis horizontal icon"></i>
                            <div class="menu">
                                <a show.bind="item.editor != 'Mind' && item.editor != 'Excel' && item.editor != 'Sheet'"
                                    href="/admin/blog/comment/download/${item.id}?type=pdf" class="item">
                                    <i class="file pdf outline icon"></i> 导出为PDF
                                </a>
                                <a show.bind="item.editor != 'Html' && item.editor != 'Mind' && item.editor !='Excel' && item.editor != 'Sheet'"
                                    href="/admin/blog/comment/download/${item.id}?type=md" class="item">
                                    <i class="file text outline icon"></i> 导出为Markdown
                                </a>
                                <div show.bind="item.editor != 'Html' && item.editor != 'Mind' && item.editor != 'Excel' && item.editor != 'Sheet'"
                                    click.delegate="md2HtmlDownloadHandler(item)" class="item">
                                    <i class="html5 icon"></i> 导出为HTML
                                </div>
                                <a show.bind="item.editor == 'Html'"
                                    href="/admin/blog/comment/download/${item.id}?type=html" class="item">
                                    <i class="html5 icon"></i> 导出为HTML
                                </a>
                                <div show.bind="item.editor == 'Excel' || item.editor == 'Mind'"
                                    click.delegate="excelDownloadHandler(item)" class="item">
                                    <i class="file excel outline icon"></i> 导出为Excel
                                </div>
                                <a show.bind="item.editor == 'Sheet'" href="/admin/blog/comment/download/${item.id}?type=xlsx"
                                    class="item">
                                    <i style="width: 1.18em; vertical-align:inherit;"
                                        class="file excel outline icon"></i>
                                    导出为Excel
                                </a>
                                <a show.bind="item.editor == 'Excel'"
                                    href="/admin/blog/comment/download/${item.id}?type=table" class="item">
                                    <i style="width: 1.18em; vertical-align:inherit;" class="table icon"></i>
                                    导出为表格
                                </a>
                                <a show.bind="item.editor == 'Sheet'"
                                    href="/admin/blog/comment/download/${item.id}?type=sheet" class="item">
                                    <i style="width: 1.18em; vertical-align:inherit;" class="table icon"></i>
                                    导出为表格
                                </a>
                                <div show.bind="item.editor == 'Mind'" click.delegate="pngDownloadHandler(item)"
                                    class="item">
                                    <i style="width: 1.18em; vertical-align:inherit;"
                                        class="file image outline icon"></i>
                                    导出为PNG
                                </div>
                                <a show.bind="item.editor == 'Mind'"
                                    href="/admin/blog/comment/download/${item.id}?type=mind" class="item">
                                    <i style="width: 1.18em; vertical-align:inherit;" class="usb icon"></i>
                                    导出为导图
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="tools">
                        <button show.bind="!item.isEditing" click.delegate="refreshHandler(item)" title="刷新同步"
                            class="mini circular ui icon button">
                            <i class="refresh icon"></i>
                        </button>
                    </div>
                </div>
                <em-blog-comment-footer comment.bind="item"></em-blog-comment-footer>
                <div class="ui divider"></div>
            </div>
            <form class="ui reply form dropzone">
                <div class="tms-blog-comment-status-bar-wrapper">
                    <div class="tms-blog-comment-status-bar"></div>
                    <div class="dropzone-previews"></div>
                </div>
                <div ref="markdownRef" class="field markdown-body fr-view">
                    <textarea ref="commentRef"></textarea>
                </div>
                <div class="ui blue buttons">
                    <div click.delegate="addHandler()" title="提交评论(ctrl+enter)"
                        class="ui blue labeled submit icon button">
                        <i class="icon check"></i> 添加评论
                    </div>
                    <!-- <div click.delegate="addHandler()" title="提交评论(ctrl+enter)" class="ui blue submit button">
                        添加评论
                    </div> -->
                    <div ui-dropdown class="ui floating dropdown icon button">
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="header"><i class="info circle icon"></i> 切换编辑器</div>
                            <div class="item" click.delegate="commentEditorHandler('html')"><i class="html5 icon"></i>
                                HTML</div>
                            <!-- <div class="item" click.delegate="commentEditorHandler('excel')"><i class="table icon"></i>
                                电子表格</div> -->
                            <div class="item" click.delegate="commentEditorHandler('sheet')"><i class="table icon"></i>
                                电子表格</div>
                            <div class="item" click.delegate="commentEditorHandler('mind')"><i class="usb icon"></i>
                                思维导图
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div click.delegate="addHandler()" title="提交评论(ctrl+enter)" class="ui blue labeled submit icon button">
                    <i class="icon edit"></i> 添加评论
                </div> -->
                <button style="float: right;" click.delegate="gotoTopHandler()" title="滚至顶部(t), 滚至底部(b)"
                    class="circular ui icon button">
                    <i class="arrow up icon"></i>
                </button>
            </form>
        </div>
        <div class="preview-template" style="display: none;">
            <div class="dz-preview dz-file-preview">
                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
            </div>
        </div>
    </div>
</template>
